import { useRoles } from '@/hooks/auth/useRoles';
import { Tag } from 'antd';
import React from 'react';

interface Props {
  roleIds: [];
}

const RoleTags: React.FC<Props> = (props) => {
  const { allRoles } = useRoles();

  const getRoleName = (id: any) => {
    const role = allRoles.find((role) => role.id === id);
    // 如果找到返回角色名，否则返回默认值
    return role ? role.name : '未知角色';
  };

  return (
    <div>
      {props.roleIds.map((id, index) => (
        <Tag key={index}>{getRoleName(id)}</Tag>
      ))}
    </div>
  );
};

export default RoleTags;
